<template>
	<view>
		<view id="myAttentionId" class="app-height myAttention" >
		    <view class="attention-data" >
		        <view class="attention-item" v-for="(item, index) in myAttentionList">
		            <view class="avatar-info">
		                <image class="avatar" :src="item.portrait?item.portrait:'https://m.nocexpo.com/statics/js/modules/h5/img/img13.png'" @click="enterPersonalByType(item)"/>
		                <view class="info" @click="enterPersonalByType(item)">
		                    <view class="name" >
		                        {{item.userName}}
		                        <image class="icon" v-if="item.type == 1&&item.state==1" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_gong.png"/>
		<!--                        <image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_cai.png" class="icon" v-else/>-->
		                    </view>
		                    <view class="user" v-if="item.type==1&&item.state==1" >
		                        <image class="icon" src="https://m.nocexpo.com/statics/js/modules/h5/img/Certification.png"/>
		                        {{item.company}}
		                    </view>
		                </view>
		            </view>
		            <view class="private-letters">
		                <!--<view class="btn-email" @click="sendMsg(item.id)">
		                    <image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_email.png" >私信
		                </view>-->
		                <view v-if="item.followEachOther == 1" class="btn-add btn-bidirectional" @click="attention(index,item.id,false,1)">
		                    <image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_bidirectional.png"/>
		                    互相关注
		                </view>
		                <view v-else-if="item.followEachOther == 2" class="btn-add btn-bidirectional" @click="attention(index,item.id,false,2)">
		                    已关注
		                </view>
		                <view v-else-if="item.followEachOther == 3" class="btn-add" @click="attention(index,item.id,true,3)">
		                    <image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_white_add.png"/>
		                    关注
		                </view>
		            </view>
		        </view>
		    </view>
		
		    <view class="connaught-style" v-show="noMore">
		        <view class="hint">暂无更多数据</view>
		    </view>
		
		</view>
	</view>
</template>

<script>
import myAttentionApi from '@/api/myAttention.js';
import commonApi from '@/utils/commonMethod.js';


export default {
	
	data() {
		return {
			page: 1,
			limit: 20,
			lastpage: 0,
			noMore: false,
			userId: '',
			myAttentionList: [],
			currentUser:{},
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	async onLoad(options) {
		this.userId = options.userId
		// $(window).scroll(function () {
		// 	let scrollTop = $(this).scrollTop()
		// 	let windowHeight = $(this).height()
		// 	let scrollHeight = $(document).height()
		// 	if (scrollTop + windowHeight > scrollHeight - 1) {
		// 		vm.searchMyAttention()
		// 	}
		// })
		const currentUser = await commonApi.currentUserAxios();
		this.currentUser = currentUser.data.session_user_h5;
		this.searchMyAttention();

	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	mounted() {
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
		saveFootPrint(stayTime){
			commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的关注")
			
		},
		searchMyAttention() {
			if (this.page != this.lastpage) {
				this.lastpage = this.page
				myAttentionApi.searchMyAttention(this.userId,this.page,this.limit).then(res => {
					if (res.data.code == 0) {
						if (res.data.page.list.length > 0) {
							this.myAttentionList = this.myAttentionList.concat(res.data.page.list);
							this.page++;
							if (res.data.page.list.length < 20) {
								this.noMore = true;
							}
						} else {
							this.noMore = true;
						}
					}
				})
			}
		},
		sendMsg(userId) {
			uni.navigateTo({
				url: '/pages/news/chatDetail/chatDetail?toUserId=' + userId
			})
			// window.location.href = '/h5/msgchat.html?toUserId=' + userId
		},
		goAnchorHome(userId) {
			uni.navigateTo({
				url: '/pages/person/anchorHomepage?userId=' + userId
			})
			// window.location.href = '/h5/anchorHomepage.html?userId=' + userId
		},
		attention(index, userId, attentionFlag, followEachOther) {
			myAttentionApi.attention(userId.toString(),attentionFlag).then(res => {
				if (res.data.code === 0) {
					if (followEachOther != 3) {
						this.myAttentionList[index].followEachOther = 3;
					} else {
						this.myAttentionList[index].followEachOther = 2;
					}
				}
			})
		},
		//因session覆盖问题，从关注页面进入展厅/个人主页带标志，页面回退刷新
		enterPersonalByType(user) {
			if (user.type == 1 && user.state == 1) {
				uni.navigateTo({
					url: '/pages/product/showroom/showroom?userId=' + user.id + '&flag=cloudcomp'
				})
				// window.location.href = '/h5/cloudcomp.html?userId=' + user.id + '&flag=cloudcomp';
			} else {
				uni.navigateTo({
					url: '/pages/person/anchorHomepage?userId=' + user.id + '&flag=anchorHomepage'
				})
				// window.location.href = '/h5/anchorHomepage.html?userId=' + user.id + '&flag=anchorHomepage';
			}
		},
	}
}
</script>

<style>
	.myAttention .attention-data {
	    background-color: #ffffff;
	    padding: 0px 28rpx;
	}
	.myAttention .attention-data .attention-item {
	    flex-wrap: nowrap;
	    padding: 18rpx 0px;
	    border-bottom: 1.4rpx solid #ededed;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.myAttention .attention-data .attention-item .avatar-info {
	    flex-shrink: 1;
	    width: 100%;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		display: flex;
	}
	.myAttention .attention-data .attention-item .avatar-info .avatar {
		width: 73rpx;
		height: 73rpx;
		flex-shrink: 0;
		border-radius: 50%;
		    display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	}
	.myAttention .attention-data .attention-item .avatar-info .info {
	    flex-shrink: 1;
	    width: 100%;
	    margin-left: 18rpx;
	}
	.myAttention .attention-data .attention-item .avatar-info .info .name{
	    font-size: 15px;
	}
	.myAttention .attention-data .attention-item .avatar-info .info .name image{
	    margin-left: 3.5rpx;
	}
	.myAttention .attention-data .attention-item .avatar-info .info image{
	    width: 28rpx;
		height: 28rpx;
	    vertical-align: middle;
	    margin-top: -7rpx;
	}
	.myAttention .attention-data .attention-item .avatar-info .info .user {
	    color: #8f99a7;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    margin-top: 9rpx;
	}
	.myAttention .attention-data .attention-item .private-letters {
	    flex-shrink: 0;
	    margin-left: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	
	
	.myAttention .attention-data .attention-item .private-letters .btn-add {
	    background-color: #019d9d;
		line-height: 46rpx;
		border-radius: 23rpx;
		padding: 0px 21rpx;
		font-size: 10px;
	}
	.myAttention .attention-data .attention-item .private-letters .btn-bidirectional image{
	    width: 21rpx;
		height: 21rpx;
	}
	.myAttention .attention-data .attention-item .private-letters .pl_btn {
	    background-color: #029E9D;
	    line-height: 46rpx;
	    border-radius: 23rpx;
	    color: #ffffff;
	    padding: 0px 21rpx;
	    font-size: 10px;
	}
	.myAttention .attention-data .attention-item .private-letters .btn-add  image{
		width: 26rpx;
		height: 26rpx;
	    vertical-align: middle;
	    margin-right: 7rpx;
	    margin-top: -3.5rpx;
	}
	.myAttention .attention-data .attention-item .private-letters .btn-bidirectional {
	    color: #8f99a7;
	    background-color: #eaecee;
	}
	.connaught-style .hint {
	    width: 100%;
	    font-size: 11px;
	    font-weight: 500;
	    color: #8f99a7;
	    line-height: 98rpx;
	    text-align: center;
	}
	
</style>